<template>
  <div class="home" >
    <div class="left">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      text-color="#fff"
      active-text-color="#3b5ee5">
      <div class="logo" style="border: 0px solid #000;" >
        <img src="../assets/images/crm_logo.png" alt="" style="padding-top: 30px;padding-left: 46px;padding-bottom: 20px;">
      </div>
      <el-menu-item  v-for="(item,index) in menu" :key="index">
        <template slot="title">
          <img :src="item.imgUrl" alt="" style="margin-left: 12px;">
          <router-link :to="item.url" style="color: #fff; text-decoration:none;margin-left: 18px;font-size: 18px;line-height: 50px;">
            {{ item.title }}</router-link>
          <!-- <span style="margin-left: 18px;font-size: 18px;line-height: 50px;">{{item.title}}</span> -->
          <img src="../assets/images/crm_29.png" alt="" style="float: right;margin-top: 20px;margin-right: 14px;">
        </template>
      </el-menu-item>
    </el-menu>
  </div>
 
  </div>
</template>

<script>
  export default {
    data() {
      return {
        select:'',
        input3:'',
        menu:[
        {
            id: 1,
            title: '首 页',
            url: '/Home',
            imgUrl: require('@/assets/images/crm_26.png'),
           
        },
        {
            id: 2,
            title: '机 会',
            url: '/Change',
            imgUrl: require('@/assets/images/crm_50.png'),
            
        },
        {
            id: 3,
            title: '报 销',
            url: '/Apply',
            imgUrl: require('@/assets/images/crm_55.png'),
            
        },
        {
            id: 4,
            title: '合 同',
            url: '/Contract ',
            imgUrl: require('@/assets/images/crm_59.png'),
           
        },
        {
            id: 5,
            title: '客 户',
            url: '/Custem',
            imgUrl: require('@/assets/images/crm_61.png'),
            
        },
        {
            id: 6,
            title: '员 工',
            url: '/Staff',
            imgUrl: require('@/assets/images/crm_64.png'),
            
        }
        ],
        user:[
        {
            id: 1,
            title: '18',
            imgUrl: require('@/assets/images/crm_06.png'),
           
        },
        {
            id: 2,
            title: '18',
            imgUrl: require('@/assets/images/crm_08.png'),
            
        },
        {
            id: 3,
            title: '张三',
            imgUrl: require('@/assets/images/crm_84.png'),
            
        }
        ]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped>
  
.home .left>>> .el-menu{
  float: left;
  width: 300px;
  position: fixed;
  height: 100%;
  background-image: url(../assets/images/crm_70.jpg);
}
.home .left >>>.el-submenu .el-menu-item{
  min-width: 100%;
}
.home .left >>>.el-menu-item{
  height: 60px;
}
.home .left >>>.el-menu-item:focus, .el-menu-item:hover{
  border-top:1px solid  #6e74f2;
  background-color: #3b5ee5;
  height: 60px;
}
.home .right{
  float: right;
  height: 920px;
  width: 1618px;
  border: 0px solid #000;
}
.home .right .left{
  
  width: 300px;
  padding-top: 30px;
  padding-left: 39px;
  
}
.home .right .left >>>.input-with-select{
  border-radius: 100px;
  height: 42px;
  border: none !important; 
}
.home .right .left >>>.el-select .el-input {
    width: 100px;
    background-color: #efeff2;
    border: none !important;  
    
  }
  .home .right .left >>>.el-input__inner{
    border: none;
    /* background-color: #f5f5f7; */
    height: 42px;
  }
  .home .right .left >>>.el-input-group__append{
    border: none;
  }
  .home .right .right {
    width: 300px;
    float: right;
    padding-top: 20px;
  }
  .home .right .right ul{
    list-style: none;
    float: left;
  }
  .home .right .right ul li{
   line-height: 20px;
    float: left;
    padding-right: 20px;
  }
</style>